<template>
  <div>
    <a-card :bordered="true" title="普通输入框">
      <a-row>
        <a-col :span="4">
          <div class="example-side">
            demo1:带有清空按钮
          </div>
        </a-col>
        <a-col :span="8">
          <div class="example-side">
            <!--------------------------------------------------------------------------------------demo1---start-->
            <a-input
              allowClear
              placeholder="带有清空按钮"
              style="width:300px"
              v-model="demo1.input1"
            />
            <!--------------------------------------------------------------------------------------demo1---end-->
            <a-button @click="() => demo1.input1 = ''" style="margin-left: 8px">重置</a-button>
          </div>
        </a-col>
        <a-col :span="12" class="example-side">
          当前值: {{ demo1.input1 }}
        </a-col>
      </a-row>
    </a-card>

    <a-card :bordered="true" style="margin-top: 20px;" title="格式输入框">
      <a-row style="margin-bottom: 10px">
        <a-col :span="4">
          <div class="example-side">
            demo2:只能输入数字
          </div>
        </a-col>
        <a-col :span="8">
          <div class="example-side">
            <!--------------------------------------------------------------------------------------demo2---start-->
            <a-input-number
              allowClear
              placeholder="只能输入数字"
              style="width:300px"
              v-model="demo2.input1"
            />
            <!--------------------------------------------------------------------------------------demo2---end-->
            <a-button @click="() => demo2.input1 = ''" style="margin-left: 8px">重置</a-button>
          </div>
        </a-col>
        <a-col :span="12" class="example-side">
          当前值: {{ demo2.input1 }}
        </a-col>
      </a-row>

      <a-row style="margin-bottom: 10px">
        <a-col :span="4">
          <div class="example-side">
            demo3:不能输入空格
          </div>
        </a-col>
        <a-col :span="8">
          <div class="example-side">
            <!--------------------------------------------------------------------------------------demo3---start-->
            <a-input
              allowClear
              placeholder="不能输入空格"
              style="width:300px"
              v-model.trim="demo2.input2"
            />
            <!--------------------------------------------------------------------------------------demo3---end-->
            <a-button @click="() => demo2.input2 = ''" style="margin-left: 8px">重置</a-button>
          </div>
        </a-col>
        <a-col :span="12" class="example-side">
          当前值: {{ demo2.input2 }}
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4">
          <div class="example-side">
            demo4:自定义校验
          </div>
        </a-col>
        <a-col :span="8">
          <div class="example-side">
            <!--------------------------------------------------------------------------------------demo4---start-->
            <a-input
              allowClear
              placeholder="邮箱校验"
              style="width:300px"
              v-model.trim="demo2.input3"
            />
            <!--------------------------------------------------------------------------------------demo4---end-->
            <a-button @click="onChange" style="margin-left: 8px" type="primary">确定</a-button>
            <a-button @click="() => demo2.input3 = ''" style="margin-left: 8px">重置</a-button>
          </div>
        </a-col>
        <a-col :span="12" class="example-side">
          当前值: {{ demo2.input3 }}
        </a-col>
      </a-row>
    </a-card>

    <footer-tool-bar>
      <a-button @click="() => {this.$router.go(-1);}" type="cancel">返回</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'

export default {
  name: 'Index',
  components: {
    FooterToolBar
  },
  data () {
    return {
      demo1: {
        input1: ''
      },
      demo2: {
        input1: '',
        input2: '',
        input3: ''
      }
    }
  },
  methods: {
    onChange () {
      const value = this.demo2.input3
      if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value))) {
        this.$message.error('请输入正确的邮箱格式')
      } else {
        this.$message.success('正确的邮箱格式')
      }
    }
  }
}
</script>

<style scoped>
	.example-side {
		display: flex;
		flex-direction: row;
		padding-left: 50px;
	}

	.example-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

</style>
